<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>影院热映大片_热映电影票房_高清电影影视大全</title>
    <meta name="keywords" content="影院热映大片,热映电影票房,热映电影购票,热映电影打分,热映电影选座">
    <meta name="description" content="为您提供热映电影大片选座购票服务，以及对热映电影评分、评价等信息介绍">
    <meta http-equiv="cleartype" content="yes">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="renderer" content="webkit">
    <meta name="HandheldFriendly" content="true">
    <meta name="format-detection" content="email=no">
    <meta name="format-detection" content="telephone=no">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="lx:autopv" content="off">
    <meta name="lx:appnm" content="movie">
    <meta name="lx:category" content="movie">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/frontcss/common.d1d257d3.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/frontcss/movie-detail.576368bb.css">
    <script src="//s0.meituan.net/bs/jsm/?f&#x3D;fe-sso-fs:build/page/vendor/jquery-1.11.3.min.js"></script>
    <script>if (window.devicePixelRatio >= 2) {
        document.write('<link rel="stylesheet" href="//s3plus.meituan.net/v1/mss_e2821d7f0cfe4ac1bf9202ecf9590e67/cdn-prod/file:5788b470/image-2x.8ba7074d.css"/>')
    }</script>
    <script type="text/javascript">
        function hopeLook(movieId, mobile) {
            var url = "${pageContext.request.contextPath}/front/index/v/hopeLook";
            console.log('点赞人手机号:' + mobile && mobile == '');
            if (mobile == '') {
                alert('尚未登陆, 请登陆之后再来收藏想看的电影!');
                window.location.href = '${pageContext.request.contextPath}/front/index/v/FORUM_TO_MOVIE_DETAIL?movieId=' + $("#movieId").val();
                return;
            }
            $.post(
                url,
                {
                    "mobile": mobile,
                    "movieId": movieId
                },
                function (data) {
                    $("#hopeLook").text(data.hopeLook);
                    if (data.isHasHopeLookBefore) {
                        $("#hopeLook-icon").removeClass('not-wish-icon');
                        if ($("#hopeLook-icon").hasClass('wish-icon')) {
                            return;
                        } else {
                            $("#hopeLook-icon").addClass('wish-icon');
                        }
                    } else {
                        $("#hopeLook-icon").removeClass('wish-icon');
                        $("#hopeLook-icon").addClass('not-wish-icon');
                    }
                },
                "json"
            );
        }
    </script>
</head>
<body>
<jsp:include page="top.jsp">
    <jsp:param name="menuId" value="2"/>
</jsp:include>
<div class="banner">
    <div class="wrapper clearfix">
        <div class="celeInfo-left">
            <div class="avatar-shadow">
                <img class="avatar" src="${pageContext.request.contextPath}/${movie.cimg}" alt="${movie.movieName}海报封面">
                <div class="movie-ver"></div>
            </div>
        </div>
        <div class="celeInfo-right clearfix">
            <div class="movie-brief-container">
                <h1 class="name">${movie.movieName}</h1>
                <div class="ename ellipsis"></div>
                <ul>
                    <li class="ellipsis">
                        <a class="text-link" href="javascript:void(0);" target="_blank"> ${movie.movieTypeName}</a>
                    </li>
                    <li class="ellipsis">
                        ${movie.areaName}
                    </li>
                    <li class="ellipsis">
                        <span>用户评分:${movie.score}分</span>
                        <ul class="score-star clearfix">
                            <li><i class="half-star left <c:if test="${movie.score>=1}">active</c:if>"></i><i
                                    class="half-star right <c:if test="${movie.score>=2}">active</c:if>"></i></li>
                            <li><i class="half-star left <c:if test="${movie.score>=3}">active</c:if>"></i><i
                                    class="half-star right <c:if test="${movie.score>=4}">active</c:if>"></i></li>
                            <li><i class="half-star left <c:if test="${movie.score>=5}">active</c:if>"></i><i
                                    class="half-star right <c:if test="${movie.score>=6}">active</c:if>"></i></li>
                            <li><i class="half-star left <c:if test="${movie.score>=7}">active</c:if>"></i><i
                                    class="half-star right <c:if test="${movie.score>=8}">active</c:if>"></i></li>
                            <li><i class="half-star left <c:if test="${movie.score>=9}">active</c:if>"></i><i
                                    class="half-star right <c:if test="${movie.score>=10}">active</c:if>"></i></li>
                        </ul>
                    </li>
                    <li class="ellipsis">${movie.registerTime}大陆上映</li>
                </ul>
            </div>
            <div class="action-buyBtn">
                <div class="action clearfix" data-val="{movieid:1291077}">
                    <a class="wish " data-wish="false" data-score="" data-bid="b_gbxqtw6x">
                        <div>
                            <i id="hopeLook-icon"
                               class="icon <c:if test="${hasHopeLook == true}">wish-icon</c:if><c:if test="${hasHopeLook != true}">not-wish-icon</c:if>"></i>
                            <span class="wish-msg" onclick="hopeLook('${movie.movieId}',$('#mobile').val())">想看</span>
                        </div>
                    </a>
                    <a class="score-btn " data-bid="b_rxxpcgwd" href="#short-comment">
                        <div>
                            <i class="icon score-btn-icon"></i>
                            <span class="score-btn-msg" data-act="comment-open-click">
                                    评分
                                </span>
                        </div>
                    </a>
                </div>
            </div>
            <div class="movie-stats-container">
                <div class="movie-index">
                    <p class="movie-index-title">想看数</p>
                    <div class="movie-index-content score normal-score">
                        <span class="index-left info-num one-line"><span class="stonefont"
                                                                         id="hopeLook">${movie.hopeLook}</span></span>
                    </div>
                </div>
                <div class="movie-index">
                    <p class="movie-index-title">累计票房</p>
                    <div class="movie-index-content box">
                        <span class="no-info" id="saleTotal">${movie.saleTotal}元</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="container" id="app">
    <div class="main-content-container clearfix">
        <div class="main-content">
            <div class="tab-container">
                <div class="crumbs-nav-container">
                    <a href="${pageContext.request.contextPath}/front/index/index">天眼电影</a> &gt; <a
                        href="${pageContext.request.contextPath}/front/index/movie">电影</a> &gt;
                    <span>${movie.movieName}</span>
                </div>
                <div class="tab-title-container clearfix">
                    <div class="tab-title active" data-act="tab-desc-click">介绍</div>
                    <div class="tab-title " data-act="tab-celebrity-click">演职人员</div>
                </div>
                <div class="tab-content-container">
                    <div class="tab-desc tab-content active" data-val="{tabtype:&#39;desc&#39;}">
                        <div class="module">
                            <div class="mod-title">
                                <h2>剧情简介</h2>
                            </div>
                            <div class="mod-content">
                                <span class="dra">${movie.content}</span>
                            </div>
                        </div>
                        <div class="module">
                            <div class="mod-title">
                                <h2>演职人员</h2>
                            </div>
                            <div class="mod-content">
                                <c:forEach items="${actorList}" var="v">
                                    <div class="celebrity-container clearfix">
                                        <div class="celebrity-group">
                                            <div class="celebrity-type">
                                                    ${v.actorTypeName}(${v.actorList.size()})
                                            </div>
                                            <ul class="celebrity-list clearfix">
                                                <c:forEach items="${v.actorList}" var="dd">
                                                    <li class="celebrity actor">
                                                        <a href="javascript:void(0);" target="_blank" class="portrait">
                                                            <img class="default-img" alt="${movie.movieName}"
                                                                 src="${pageContext.request.contextPath}/${dd.cimg}">
                                                        </a>
                                                        <div class="info">
                                                            <a href="javascript:void(0);" target="_blank" class="name">
                                                                    ${dd.actorName}
                                                            </a>
                                                        </div>
                                                    </li>
                                                </c:forEach>
                                            </ul>
                                        </div>
                                    </div>
                                </c:forEach>

                            </div>
                        </div>
                        <div class="module" id="comment-module">
                            <div class="mod-title">
                                <h2>最新短评</h2>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="related">
            <div class="module">
                <div class="mod-title">
                    <h2>热播电影</h2>
                </div>
                <div class="mod-content">
                    <div class="related-movies">
                        <dl class="movie-list">
                            <c:forEach items="${movieList}" var="v">
                                <dd>
                                    <div class="movie-item">
                                        <a href="${pageContext.request.contextPath}/front/index/movieDetail?movieId=${v.movieId}"
                                           target="_blank">
                                            <div class="movie-poster">
                                                <img alt="${v.movieName}封面"
                                                     src="${pageContext.request.contextPath}/${v.cimg}">
                                            </div>
                                        </a>
                                        <div class="movie-ver"></div>
                                    </div>
                                    <div class="channel-detail movie-item-title" title="${v.movieName}">
                                        <a href="${pageContext.request.contextPath}/front/index/movieDetail?movieId=${v.movieId}"
                                           target="_blank">${v.movieName}</a>
                                    </div>
                                    <div class="channel-detail channel-detail-orange">${v.score}</div>
                                </dd>
                            </c:forEach>
                        </dl>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/page.css">
    <div>
        <div id="pager" class="pager ">
        </div>
    </div>

    <form id="short-comment" name="form1" action="${pageContext.request.contextPath}/front/index/v/forum" method="post"
          onsubmit="return check();">
        <%--        <input type="hidden" name="forumId" value="0">--%>
        <input type="hidden" name="mobile" id="mobile" value="${member.mobile}"/>
        <input type="hidden" name="movieId" id="movieId" value="${movie.movieId}"/>
        <fieldset>
            <legend>写短评</legend>
            <table width="100%">
                <tr>
                    <td>
                        <label><input type="radio" name="grade" value="1">1分</label>
                        <label><input type="radio" name="grade" value="2">2分</label>
                        <label><input type="radio" name="grade" value="3">3分</label>
                        <label><input type="radio" name="grade" value="4">4分</label>
                        <label><input type="radio" name="grade" value="5">5分</label>
                        <label><input type="radio" name="grade" value="6">6分</label>
                        <label><input type="radio" name="grade" value="7">7分</label>
                        <label><input type="radio" name="grade" value="8">8分</label>
                        <label><input type="radio" name="grade" value="9">9分</label>
                        <label><input type="radio" name="grade" value="10">10分</label>
                    </td>
                </tr>
                <tr>
                    <td>
                        <textarea name="remark" id="remark" style="width: 100%;height: 100px;"
                                  placeholder="请输入你的评论"></textarea><br/>
                    </td>
                </tr>
                <tr>
                    <td align="right">
                        <input class="btn" type="submit" value="提交"/>
                    </td>
                </tr>
            </table>
        </fieldset>
    </form>
</div>
<script type="text/javascript">
    function check() {
        if ($("#mobile").val() == "") {
            alert("请登录后再评论");
            window.location.href = '${pageContext.request.contextPath}/front/index/v/FORUM_TO_MOVIE_DETAIL?movieId=' + $("#movieId").val();
            return false;
        }
        if (form1.grade.value == "") {
            alert("请选择评分");
            return false;
        }
        if ($("#remark").val() == "") {
            alert("评论内容不能为空");
            return false;
        }
        return true;
    }
</script>
<jsp:include page="bottom.jsp"/>
</body>
</html>
<%--根据js的加载顺序，js脚本应该尽量放在文档最后面，因为放在前面由于js的加载时单线程的会阻塞后面dom的加载，如果有些dom节点没有加载完成
    js需要操作到的话可能就无法找到定义或者其他奇奇怪怪的问题--%>
<script src="${pageContext.request.contextPath}/js/jquery.z-pager.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
    $("#pager").zPager({
        totalData: 50,
        pageData: 4,
        current: 1, //当前页码数
        htmlBox: $("#wraper"),
        btnShow: true,
        ajaxSetData: true,
        pageCount: 0,
        url: "${pageContext.request.contextPath}/front/index/pageForumList", //ajax路由
        htmlBox: "", //ajax数据写入容器
        movieId: $("#movieId").val(),
        dataRender: function (data) {
            if (data == null || data == undefined || data.length == 0) {
                $("#comment-module").append('<p align="center" style="font-size: large;font-weight: bold;color: #0a628f;font-family: sans-serif">评论空空如也,快来写第一条短评吧!</p>');
                return;
            }
            $(".mv-comment").remove();

            for (let i = 0; i < data.length; i++) {
                console.log(data[i])
                let comment =
                    '<div class="mod-content mv-comment">' +
                    '<div class="comment-list-container">' +
                    '<ul>' +
                    '<li class="comment-container">' +
                    '<div class="portrait-container">' +
                    '<div class="portrait">' +
                    '<img src="${pageContext.request.contextPath}/' + data[i].headImg + '" alt="">' +
                    '</div>' +
                    '<i class="level-1-icon"></i>' +
                    '</div>' +
                    '<div class="main">' +
                    '<div class="main-header clearfix">' +
                    '<div class="user">' +
                    '<span class="name">' + data[i].userName + '</span>' +
                    '</div>' +
                    '<div class="time" title="' + data[i].forumDate + '">' +
                    '<span title="' + data[i].forumDate + '">' + data[i].forumDate + '</span>' +
                    '<ul class="score-star clearfix">' +
                    '<li>' +
                    '<i class="half-star left '.concat(data[i].grade >= 1 ? 'active' : '') + '"></i>' +
                    '<i class="half-star right '.concat(data[i].grade >= 2 ? 'active' : '') + '"></i>' +
                    '</li>' +
                    '<li>' +
                    '<i class="half-star left '.concat(data[i].grade >= 3 ? 'active' : '') + '"></i>' +
                    '<i class="half-star right '.concat(data[i].grade >= 4 ? 'active' : '') + '"></i>' +
                    '</li>' +
                    '<li>' +
                    '<i class="half-star left '.concat(data[i].grade >= 5 ? 'active' : '') + '"></i>' +
                    '<i class="half-star right '.concat(data[i].grade >= 6 ? 'active' : '') + '"></i>' +
                    '</li>' +
                    '<li>' +
                    '<i class="half-star left '.concat(data[i].grade >= 7 ? 'active' : '') + '"></i>' +
                    '<i class="half-star right '.concat(data[i].grade >= 8 ? 'active' : '') + '"></i>' +
                    '</li>' +
                    '<li>' +
                    '<i class="half-star left '.concat(data[i].grade >= 9 ? 'active' : '') + '"></i>' +
                    '<i class="half-star right '.concat(data[i].grade >= 10 ? 'active' : '') + '"></i>' +
                    '</li>' +
                    '</ul>' +
                    '</div>' +
                    '<div class="approve">' +
                    '<i  id="' + data[i].forumId + '" class="'.concat(data[i].hasApprove == true ? 'approve-icon' : 'not-approve-icon') + ' " onclick="checkHasLoginOrApprove(' + data[i].forumId + ')"></i><span id="approveNumber' + data[i].forumId + '" class="num">' + data[i].countNumber + '</span>' +
                    '</div>' +
                    '</div>' +
                    '<div class="comment-content">' + data[i].remark + '</div>' +
                    '</div>' +
                    '</li>' +
                    '</ul>' +
                    '</div>' +
                    '<a class="comment-entry" href="#short-comment">写短评</a>' +
                    '</div>';

                $("#comment-module").append(comment);
            }
        }
    });

    function checkHasLoginOrApprove(forumId) {
        if ($("#mobile").val() == "") {
            alert("请登录后再点赞");
            window.location.href = '${pageContext.request.contextPath}/front/index/v/FORUM_TO_MOVIE_DETAIL?movieId=' + $("#movieId").val();
            return;
        }
        $.get('${pageContext.request.contextPath}/front/index/v/approve'
            , {
                "forumId": forumId,
                "mobile": $("#mobile").val()
            },
            function (data) {
                let approve_icon = "#" + forumId;
                if (data.data.hasApprove) {
                    $(approve_icon).removeClass('not-approve-icon');
                    if ($(approve_icon).hasClass('approve-icon')) {
                        return;
                    } else {
                        $(approve_icon).addClass('approve-icon');
                    }
                } else {
                    $(approve_icon).removeClass('approve-icon');
                    $(approve_icon).addClass('not-approve-icon');
                }
                let approveNumber = "#approveNumber" + forumId;
                $(approveNumber).html(data.data.countNumber);
                console.log(data);
            },
            "json"
        )
    }

    function currentPage(currentPage) {
        /*
                触发页码数位置： Page/js/jquery.z-pager.js 64行
            */
        console.log("当前页码数：" + currentPage);
    }
</script>

